<div class="pageheader">
      <h2><i class="fa fa-home"></i> Add Questions</h2>
    </div>
  <style type="text/css">
 .help-block{color:red!important;}
  span.select2-selection--single
  {
	  height:40px!important;
  }
  span.select2-selection__rendered{height:40px;line-height:40px!important;}
  span.select2-selection__arrow{height:40px!important;line-height:40px!important;}
  .radio-toolbar{
    float: right;
}

.radio-toolbar input[type="radio"] {
    visibility:hidden; 
}

.radio-toolbar label {
    display:inline-block;
    background-color:#3B3E40;
    color:#fff;
    padding:10px 15px;
	cursor: pointer;
    font-family: FMSlimRegular, Helvetica, sans-serif;
    font-size:16px;
	border-radius: 2px;
}

.radio-toolbar label:hover {
    background-color:#9ac746;
}

.radio-toolbar label:has(input[type="radio"]:checked) { 
    background-color:#1382C9;
}

#qtypea1,#qtypea2,#qtypea3,#qtypea4{
display: none;
}

.required_html {
    display: block!important;
    margin-top: -117px!important;
	    visibility: hidden;
}

  </style>  
    <div class="contentpanel">
       
      <div class="panel panel-default">
	  <form action="<?php echo site_url("admin").'/'.$this->uri->segment(2); ?>/add_question_form" method="post" class="form-horizontal">       
        <div class="panel-body">
		<div class="clearfix mb30"></div>
		<?php if($this->session->flashdata("added_question") !== false && $this->session->flashdata("added_question") == 1)
		{			?>
		<div class="alert alert-success fade in">
				<a href="#" class="close" data-dismiss="alert">&times;</a>
				<strong>Success!</strong> Question Added successfully.
			</div>
		<?php }
else{
	?>
	<div class="alert alert-danger fade in">
			<strong>Danger!</strong> After publishing An Exam you wont be able to add questions.
		</div>
	<?php
}		?>
		 <div class="row">
		  <div class="col-lg-12">
			<div class="radio-toolbar radio-toolbar1" id="tabs">
			  <label for="radio1"><input name="qtype" type="radio" id="radio1" value="1" />True/False</label>
			  <label for="radio2"><input name="qtype" type="radio" id="radio2" value="2" />MCQ(1 from 4)</label>
			  <label for="radio3"><input name="qtype" type="radio" id="radio3" value="3" />MCQ(multiple answer)</label>
			  <label for="radio4"><input name="qtype" type="radio" id="radio4" value="4" />Writing</label>
			</div>
		  </div>
		 </div>	
		 <div class="row" style="margin-top:10px;"></div>
		 <div class="row">
			<div class="col-md-6">
				<div class="form-group">
					<input type="text" name="question_marks" placeholder="Marks for question" class="form-control" />
				</div>
			</div> 
			
			<div class="col-md-6">
				<select name="exam_no" style="height:40px;" class="form-control">
					<option value="">Select a Exam</option>
					<?php 
					$exams = $this->db->get_where("tbl_exams",array("published"=>0))->result_array();
					foreach($exams as $exam){	?>					
					<option value="<?php echo $exam["id"];?>" <?php if($param2 == $exam["id"]){echo "selected";} ?>><?php echo $exam["exam_title"]; ?></option>
					<?php } ?>
				</select>				
			</div>
		 </div> 
		  <div class="row">
			  <h4>Question : </h4>
		  </div>
		  <div class="row form-group">
			  <div class="field-wrap wysiwyg-wrap">
				<textarea class="post required_html form-control" name="question" rows="5" required></textarea>
			  </div>
		  </div>
		  
		 <div class="row">
		
			
			<div class="row" id="qtypea1">	
			  <div class="row" style="margin-left: 15px;">
						  <h2>Answer for Question</h2>
						</div>			
			  <div class="col-lg-12">
				<div class="radio-toolbar true_false" style="float: left;">
				  <label for="answer11"><input name="answer1" type="radio" id="answer11" value="1" />True</label>
				  <label for="answer12"><input name="answer1" type="radio" id="answer12" value="0" />False</label>
				</div>		
			  </div>
			</div>
			<div class="row" id="qtypea2">	
			<div class="row form-group" style="margin-left: 15px;">
			  <h2>Answer for Question</h2>
			</div>			
			  <div class="col-lg-12">
				  <div class="col-lg-9">
					<div class="field-wrap">
						<textarea class="post required_html form-control" name="answer2[]" rows="5"></textarea>
					</div>
				  </div>
				  <div class="col-lg-3">
					<select name="correct2[]" class="form-control">
						<option value="0">Incorrect</option>
						<option value="1">Correct</option>
					</select>
				  </div>	  
			  </div>  
			  <div class="col-lg-12">	  
				  <div class="col-lg-9">
					<div class="field-wrap">
						<textarea class="post required_html form-control" name="answer2[]" rows="5"></textarea>
					</div>
				  </div>
				  <div class="col-lg-3">
					<select name="correct2[]" class="form-control">
						<option value="0">Incorrect</option>
						<option value="1">Correct</option>
					</select>
				  </div>	  
			  </div>	    
			  <div class="col-lg-12">
				  <div class="col-lg-9">
					<div class="field-wrap">
						<textarea class="post required_html form-control" name="answer2[]" rows="5"></textarea>
					</div>
				  </div>
				  <div class="col-lg-3">
					<select name="correct2[]" class="form-control">
						<option value="0">Incorrect</option>
						<option value="1">Correct</option>
					</select>
				  </div>	  
			  </div>  
			  <div class="col-lg-12">	  
				  <div class="col-lg-9">
					<div class="field-wrap">
						<textarea class="post required_html form-control" name="answer2[]" rows="5"></textarea>
					</div>
				  </div>
				  <div class="col-lg-3">
					<select name="correct2[]" class="form-control">
						<option value="0">Incorrect</option>
						<option value="1">Correct</option>
					</select>
				  </div>
				</div>
			 </div>
			<div class="row input_fields_wrap" id="qtypea3">
			  <div class="row" style="margin-left: 15px;">
			  <h2>Answer for Question</h2>
			</div>
				<div class="row" style="margin:10px 0;">
				  <div class="col-lg-12">
					<button class="btn btn-success" id="add_field_button" type="button" style="float: left;"><i class="fa fa-plus"></i>Add More Answer</button>
				  </div>  
				</div>
				<div id="ad_html">	
				  <div class="col-lg-12 form-group">
					  <div class="col-lg-9">
						<div class="field-wrap">
							<textarea class="post required_html form-control" name="answer3[]" rows="5"></textarea>
						</div>
					  </div>
					  <div class="col-lg-3">
						<select name="correct3[]" class="form-control">
							<option value="0">Incorrect</option>
							<option value="1">Correct</option>
						</select>
					  </div>
					</div>
						
				</div>
			</div>
			<div class="row" id="qtypea4">	
				<div class="row" style="margin-left: 15px;">
				  <h2>Answer for Question</h2>
				</div>			
			  <div class="col-lg-9">
					<div class="field-wrap">
						<textarea class="post" name="answer4" rows="5"></textarea>
					</div>
			  </div>
			</div>
    </div>
	<div class="row">
		<div class="col-lg-8 col-lg-12">
			<div class="col-lg-3">
				<button type="submit" class="btn btn-success" name="submit_add_question">Add Question</button>
			</div>
			<div class="col-lg-5">
				<button type="submit" class="btn btn-success" name="submit_add_question_publish">Add Question And Publish Exam</button>
			</div>
		</div>
	</div>
	
        </div><!-- panel-body -->
	</form>	
      </div><!-- panel -->
        
    </div><!-- contentpanel -->

</div><!-- mainpanel -->
 
  
</div>

<script src="<?php echo base_url();?>adm/js/jquery-1.10.2.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php echo base_url();?>adm/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>adm/js/modernizr.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery.sparkline.min.js"></script>
<script src="<?php echo base_url();?>adm/js/toggles.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery.cookie.js"></script>
<script src="<?php echo base_url();?>adm/js/select2.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery.wysiwyg.js"></script>
<script src="<?php echo base_url();?>adm/js/bootstrapValidator.js"></script>
<script src="<?php echo base_url();?>adm/js/custom.js"></script>
<?php $this->load->view("admin/footer_model");?>
<script>
  jQuery(document).ready(function($) {
	var answer3 = {
								 validators: {					
											 notEmpty: {
															message: 'Please Write A Answer',
															transformer: function($field, validatorName, validator) {
																		var value = $field.val();
																		return value;
																	}
															
														}
								 }
								 };
	var correct3 = {
								 validators: {					
											 notEmpty: {
															message: 'Please Select A Option'
														}
								 }
								 };
       jQuery('.post').wysiwyg({
          controls: {
              html: {visible: true},
              h1: {visible: false},
              h2: {visible: false},
              h3: {visible: false},
              code: {visible: false },
              createLink: {visible: false},
              unLink: {visible: true},
              insertImage: {visible: false},
              insertTable: {visible: false},
              insertHorizontalRule: {visible: false},
              subscript: {visible: true},
              superscript: {visible: true},
              insertOrderedList: {visible: false},
              insertUnorderedList: {visible: false},
              indent: {visible: true},
              outdent: {visible: true},
              undo: {visible: true},
              redo: {visible: true},
              justifyRight: {visible: true},
              justifyLeft: {visible: true},
              justifyFull: {visible: true},
              justifyCenter: {visible: true}
          },
		  css : { fontFamily: 'Arial, Tahoma', fontSize : '13px', color : '#9fa8b0'},
          initialContent: ""
      });
	  jQuery('.post').wysiwyg('focus');

    // Chosen Select
    jQuery("select").select2({"width":"100%"});
    
    // Delete row in a table
    jQuery('.delete-row').click(function(){
      var c = confirm("Continue delete?");
      if(c)
        jQuery(this).closest('tr').fadeOut(function(){
          jQuery(this).remove();
        });
        
        return false;
    });
	 var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
	var html 			= '<div class="col-lg-12 form-group">\
								<div class="col-lg-9">\
									<div class="field-wrap">\
										<textarea class="post required_html form-control" name="answer3[k]" rows="5"></textarea>\
									</div>\
								</div>\
								<div class="col-lg-3">\
									<select name="correct3[k]" class="form-control">\
										<option value="0">Incorrect</option> \
										<option value="1">Correct</option>\
									</select>\
								</div>\
							</div>'; 
    var add_button      = $("#add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
	
	var bookIndex = 0;
    $(add_button).click(function(e){ //on add input button click
	
	e.preventDefault();
	 
        
        if(x < max_fields){ //max input box allowed
			bookIndex++;
            x++; //text box increment			
          $(wrapper).append(html);
		   $(wrapper)
						.find('[name="answer3[k]"]').attr('name', 'answer3[]').end()
						.find('[name="correct3[k]"]').attr('name', 'correct3[]').end();
            $('.form-horizontal')
                .bootstrapValidator('addField', 'answer3[]', answer3)
                .bootstrapValidator('addField', 'correct3[]', correct3);
				 jQuery('.post').wysiwyg({
          controls: {
              html: {visible: true},
              h1: {visible: false},
              h2: {visible: false},
              h3: {visible: false},
              code: {visible: false },
              createLink: {visible: false},
              unLink: {visible: true},
              insertImage: {visible: false},
              insertTable: {visible: false},
              insertHorizontalRule: {visible: false},
              subscript: {visible: true},
              superscript: {visible: true},
              insertOrderedList: {visible: false},
              insertUnorderedList: {visible: false},
              indent: {visible: true},
              outdent: {visible: true},
              undo: {visible: true},
              redo: {visible: true},
              justifyRight: {visible: true},
              justifyLeft: {visible: true},
              justifyFull: {visible: true},
              justifyCenter: {visible: true}
          },
		  css : { fontFamily: 'Arial, Tahoma', fontSize : '13px', color : '#9fa8b0'},
          initialContent: ""
      });

    // Chosen Select
    jQuery("select").select2({"width":"100%"});
			 
        }
    });
	$(document).on('change', '.wysiwyg', function(e) { 
		 $('.form-horizontal').bootstrapValidator('revalidateField', 'answer3[]');
		 $('.form-horizontal').bootstrapValidator('revalidateField', 'answer2[]');
	});
	jQuery('.post').wysiwyg('document').keypress(function(e) {
		 $('.form-horizontal').bootstrapValidator('revalidateField', 'question');
		 $('.form-horizontal').bootstrapValidator('revalidateField', 'answer2[]');
		 $('.form-horizontal').bootstrapValidator('revalidateField', 'answer3[]');
	});
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
	$(".true_false input").change(function () {
		$(".true_false label").css("background-color", "#3B3E40");
		$(this).parent().css("background-color", "#1382C9");
	});
	$("input[name='qtype']").change(function () {
		
		var deger = $(this).val();
		$(".radio-toolbar1 label").css("background-color", "#3B3E40");
		$(this).parent().css("background-color", "#1382C9");
		if (deger == 1) {
			$("#qtypea1").show();
			$("#qtypea2").hide();
			$("#qtypea3").hide();
			$("#qtypea4").hide();
		}
		else if (deger == 2) {
			$("#qtypea1").hide();
			$("#qtypea2").show();
			$("#qtypea3").hide();
			$("#qtypea4").hide();
		}
		else if (deger == 3) {
			$("#qtypea1").hide();
			$("#qtypea2").hide();
			$("#qtypea3").show();
			$("#qtypea4").hide();
		}
		else{
			$("#qtypea1").hide();
			$("#qtypea2").hide();
			$("#qtypea3").hide();
			$("#qtypea4").show();
		}
	});
     jQuery('.form-horizontal').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
						 question_marks:{
								 validators: {					
											 notEmpty: {
															message: 'Please Enter Question Marks'
														},
											integer: {
															message: 'Please Enter Valid Question Marks'
														}			
											}
								 },
								 qtype:{
								 validators: {					
											 notEmpty: {
															message: 'Please Select A Question type'
														}
											}
								 },
								 question:{
									 validators: {					
												 notEmpty: {
																message: 'Please Write A Question'
															}
									 }
								 },
								 'correct3[]':correct3,
								 'answer3[]':answer3,
								 'answer2[]':{
								 validators: {					
											 notEmpty: {
															message: 'Please Write A Answer'
														}
								 }
								 },
								 answer1:{
								 validators: {					
											 notEmpty: {
															message: 'Please Select A Answer'
														}
								 }
								 },
								 'correct2[]':{
								 validators: {					
											 notEmpty: {
															message: 'Please Select As Answer'
														}
								 }
								 },
					}
	  });
    // Show aciton upon row hover
    jQuery('.table-hidaction tbody tr').hover(function(){
      jQuery(this).find('.table-action-hide a').animate({opacity: 1});
    },function(){
      jQuery(this).find('.table-action-hide a').animate({opacity: 0});
    });
  
  
  });
</script>

</body>
</html>
